<template>
    <div class="third-login">
        <el-divider>
            <span class="divider-text">其他登录方式</span>
        </el-divider>
        <div class="icon-wrap">
            <div v-for="(item, index) in typeList" :key="index" class="login-icon" :class="item.icon" />
        </div>
    </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const typeList = ref([
    {
        icon: 'wechat',
    },
    {
        icon: 'dingtalk',
    },
    {
        icon: 'wxwork',
    },
])
</script>
<style scoped lang="scss">
.third-login {
    .divider-text {
        color: var(--py-color-text-light);
        font-size: 12px;
        font-weight: 400;
    }

    .icon-wrap {
        display: flex;
        justify-content: center;
        margin-top: 18px;

        .login-icon {
            border-radius: 3px;
            cursor: pointer;
            height: 36px;
            margin-right: 28px;
            width: 36px;
        }

        .login-icon.wxwork {
            background: #fff no-repeat 50%;
            background-size: 77%;
            border: 1px solid #e1e3e5;
            background-image: url('@/assets/images/wxwork.png');
        }

        .login-icon.dingtalk {
            background: #2f7deb no-repeat 50%;
            background-size: 77%;
            background-image: url('@/assets/images/dingtalk.png');
        }

        .login-icon.wechat {
            background: #559f30 no-repeat 50%;
            background-size: 77%;
            background-image: url('@/assets/images/wechat.png');
        }
    }
}
</style>
